<template>
  <div class="collect-page">
    <van-nav-bar left-arrow @click-left="$router.push('/article')">
      <template #right>
        <div class="search-box">
          <span
            ><a href="#/city">上海</a>
            <van-icon class="play" name="play" size="10px" color="#ccc" /><i
              >|</i
            ><van-icon name="search" size="20px" color="\e906"
          /></span>
          <input type="text" placeholder="请输入小区或地址" />
        </div>
        <div class="icon">
          <van-icon name="location-o" size="20px" color="\e906">
            <router-link to="/map" class="link">123</router-link></van-icon
          >
        </div>
      </template>
    </van-nav-bar>

    <van-sticky :offset-top="50">
      <van-dropdown-menu>
        <van-dropdown-item title="区域"
          ><van-picker :columns="columns" /><van-row>
            <van-col span="8"
              ><van-button plain type="primary" block>取消</van-button></van-col
            >
            <van-col span="16"
              ><van-button type="primary" block>确认</van-button></van-col
            >
          </van-row>
        </van-dropdown-item>
        <van-dropdown-item title="方式"
          ><van-picker :columns="zf" /><van-row>
            <van-col span="8"
              ><van-button plain type="primary" block>取消</van-button></van-col
            >
            <van-col span="16"
              ><van-button type="primary" block>确认</van-button></van-col
            >
          </van-row></van-dropdown-item
        >
        <van-dropdown-item title="租金"
          ><van-picker :columns="zj" /><van-row>
            <van-col span="8"
              ><van-button plain type="primary" block>取消</van-button></van-col
            >
            <van-col span="16"
              ><van-button type="primary" block>确认</van-button></van-col
            >
          </van-row></van-dropdown-item
        >
        <van-dropdown-item title="筛选" @open="show = true">
        </van-dropdown-item>
      </van-dropdown-menu>
    </van-sticky>
    <van-popup
      v-model="show"
      position="right"
      :style="{ height: '100%', width: '80%' }"
    >
      <div class="box-hous">
        <div>12</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
      </div>
    </van-popup>

    <Card v-for="item in list" :key="item.id" :item="item"></Card>
  </div>
</template>

<script>
import Card from "@/components/card.vue";
import { home } from "@/api/house";
export default {
  name: "collect-page",
  components: {
    Card,
  },
  async created() {
    const data = await home();
    console.log(data.body.list);
    console.log((this.list = data.body.list));
  },
  data() {
    return {
      list: [],
      value1: 0,
      value2: "a",
      columns: [
        {
          text: "浙江",
          children: [
            {
              text: "杭州",
              children: [{ text: "西湖区" }, { text: "余杭区" }],
            },
            {
              text: "温州",
              children: [{ text: "鹿城区" }, { text: "瓯海区" }],
            },
          ],
        },
        {
          text: "福建",
          children: [
            {
              text: "福州",
              children: [{ text: "鼓楼区" }, { text: "台江区" }],
            },
            {
              text: "厦门",
              children: [{ text: "思明区" }, { text: "海沧区" }],
            },
          ],
        },
      ],
      zf: ["不限", "整租", "合租"],
      zj: [
        "不限",
        "1000及以下",
        "1000-2000",
        "2000-3000",
        "3000-4000",
        "4000-5000",
        "5000-6000",
        "7000以上",
      ],
      show: false,
    };
  },
  methods: {
    showPopup() {
      this.show = true;
    },
  },
};
</script>

<style lang="less" scoped>
.box-hous {
  padding: 15px 15px;
}

.link {
  position: absolute;
  top: -25px;
  opacity: 0;
}
.play {
  transform: rotate(90deg);
}
a {
  color: #000;
}
.article-page {
  position: relative;
  .van-swipe-item {
    width: 375px;
    height: 216px;
  }
  img {
    position: absolute;
    top: 0;
    width: 100%;
  }
  .search-box {
    position: absolute;
    top: 22px;
    left: 10px;
    height: 20px;
    margin: 0 10px;
    padding: 5px 5px 5px 8px;
    border-radius: 3px;
    background-color: #fff;
    border-radius: 3px;
    span {
      position: absolute;
      font-size: 15px;
      i {
        color: #ccc;
        font-size: 18px;
        font-weight: 200;
        padding-right: 8px;
        line-height: 12px;
      }
    }
    input {
      // position: absolute;
      // top: ;
      height: 20px;
      width: 180px;
      line-height: 30px;
      border: 0;
      padding: 0px 25px;
      font-size: 14px;
      margin-left: 70px;
    }
  }
  .icon {
    position: absolute;
    top: 25px;
    right: 10px;
    font-size: 20px;
    color: #000;
  }
  .group {
    background-color: #f6f5f6;
    overflow: hidden;
    padding: 0 10px;
    .group-title {
      position: relative;
      margin: 15px 0 15px 10px 10px;
      font-size: 15px;
      .more {
        color: #787d82;
        position: absolute;
        right: 0;
        font-size: 14px;
        font-weight: 400;
      }
    }
  }
}
</style>
